﻿*{-webkit-tap-highlight-color:transparent;padding:0;margin:0;}	
	body{
		background:white;	
		width:100%;	       
	}	
	/******STATE BAR*******/
	.div-statebar{
		background-color: #f7f7f7;	
		position:relative;
		text-align:center;	
	}
	.img-back-style{
		display:inline;
		position:absolute;
		top:0px; 
		left:0px; 
	}
	.span-title-style{
		color:#4e4e4e;
	}
	.input-button-style{
		display:inline;
		position:absolute;
		top:0px; 
		right:0px;
		color:#61A3F4;
		background-color:white;
		border:solid 1px #61A3F4;
		border-radius:2px;	
	}
	/******CHART *******/
	.chart-title{
	   margin:0 4% 0  4%;
	   text-align:center;	   
	}
	.chart-title div{	
		display:inline-block;
		text-align:center;		
		width:46%;
	}
	.chart{
		margin-left:4%;
		margin-right:4%;
		text-align:center;
	}
    .select-style{
		color:#63A9EA;
		border-bottom:solid 3px #63A9EA;
	}
	.unselect-style{
		color:#AEAEAE;
		border-bottom:none;
	}
    .chart-bg{
	    background-image:url(../images/moniter/bg_pic@3x.png);
	    background-repeat:no-repeat;
	    background-position:center;
	   background-size:cover;/*opacity:0.70;*/
    }	
	.tips{
	    font-family:"微软雅黑";
	    color:#619CD2;
    }
    .unit{
	    position:absolute;	
    }
    .timetip{
	    position:absolute;
    }
	/*****DAU TABLE****/
	table {
	   width:92%;
	   margin:1.5%  4%  0  4%;
	   border-collapse: collapse;
	}	
	tr{
		text-align:center;	
	}
	thead{
		background-color:#f0f0f0;
		color:#696969;
		border-radius:2px;
	}	
	td{
		width:46%;
	}	
	tbody tr{
		border-bottom:solid 1px silver;
		color:#AEAEAE;
	}
    /******CHART*******/
	.div-monthSelect{
		display: none; 
		z-index:1001;
		position: fixed;
		top:25%;
		width: 84%;
		opacity:0;		
		top:48px;	
		width:72px;	 
	    right:14px;	
		background:black;
		height:210px;
		overflow:auto;
	}	
	.div-monthSelect li{
		list-style:none;
		line-height:42px;
		text-align:center;
		color:white;
		border-bottom:solid 1px white;		
	}
@media screen and (min-width: 321px) and (max-width: 360px){
	/******STATE BAR*******/
	.div-statebar{
        height:42px;		
	}
	.img-back-style{
	   top:11px; 
	   left:14px;
	   width:12px;
	   height:21px;
	}
	.span-title-style{
		font-size:17px;
        line-height:42px;		
	}

	.input-button-style{
	   width:72px;
	   height:24px;
	   top:8px; 
	   right:14px;
	}
	.tips{
	  font-size:11.3px;
      height:26px;	  
	}
	.pic{
		height:16.2px;
		width:16.2px;
		margin-left:17.1px;
		margin-right:3.8px;
		margin-top:8.5px;
	}
	.timetip{
		margin-top:8.5px;
	}
	.unit{
		right:26px;
		margin-top:8.5px;
	}
	/******CHART *******/
   .chart-title{	  
	  font-size:15px;
   }
   .chart-title div{	
	  line-height:38px;
	}
	/*****DAU TABLE****/
   td{
	   font-size:13px;
   }
	thead tr{
		height:29px;
	}	
	tbody tr{
		height: 43px;
	}
}

@media screen and (min-width: 376px){	
	/******STATE BAR*******/
   .div-statebar{
        height:49px;		
	}
	.img-back-style{
	   top:11px; 
	   width:13px;
	   height:24px;
	   left:17px;
	}
	.span-title-style{
		font-size:20px;
        line-height:49px;	
	}
	.input-button-style{
	  width:83px;
	   height:28px;
	   top:10px; 
	   right:17px;
	}
	.tips{
	  font-size:13.2px;
      height:30px;	  
	}
	.pic{
		height:19px;
		width:19px;
		margin-left:20px;
		margin-right:4.4px;
		margin-top:10px;
	}
	.timetip{
		margin-top:10px;
	}
	.unit{
		right:30px;
		margin-top:10px;
	}
	/******CHART *******/
	.chart-title{	  
	  font-size:18px;
	}
	.chart-title div{	
	  line-height:44px;
	}
	/*****DAU TABLE****/	
   td{
	   font-size:15px;
   }
	thead tr{
		height:34px;
	}	
	tbody tr{
		height: 50px;
	}
	 .chart-title div{	
	  line-height:44px;
	}
}
@media screen and (min-width: 361px) and (max-width: 375px){
	/******STATE BAR*******/
	.div-statebar{
        height:42px;		
	}
	.img-back-style{
	   top:11px; 
	   left:14px;
	   width:12px;
	   height:21px;
	}
	.span-title-style{
		font-size:18px;
        line-height:44px;		
	}

	.input-button-style{
	   width:72px;
	   height:24px;
	   top:8px; 
	   right:14px;
	}
	.tips{
	  font-size:11.3px;
      height:26px;	  
	}
	.pic{
		height:16.2px;
		width:16.2px;
		margin-left:17.1px;
		margin-right:3.8px;
		margin-top:8.5px;
	}
	.timetip{
		margin-top:8.5px;
	}
	.unit{
		right:26px;
		margin-top:8.5px;
	}
	/******CHART *******/
   .chart-title{	  
	  font-size:15px;
   }
   .chart-title div{	
	  line-height:38px;
	}
	/*****DAU TABLE****/
   td{
	   font-size:13px;
   }
	thead tr{
		height:29px;
	}	
	tbody tr{
		height: 43px;
	}
}
@media screen and (max-width: 320px){
	/******STATE BAR*******/
	.div-statebar{
        height:42px;		
	}
	.img-back-style{
	   top:11px; 
	   left:14px;
	   width:10.32px;
	   height:19px;
	}
	.span-title-style{
		font-size:15.5px;
        line-height:42px;		
	}

	.input-button-style{
	   width:72px;
	   height:24px;
	   top:8px; 
	   right:14px;
	}
	.tips{
	  font-size:11.3px;
      height:26px;	  
	}
	.pic{
		height:16.2px;
		width:16.2px;
		margin-left:17.1px;
		margin-right:3.8px;
		margin-top:8.5px;
	}
	.timetip{
		margin-top:8.5px;
	}
	.unit{
		right:26px;
		margin-top:8.5px;
	}
	/******CHART *******/
   .chart-title{	  
	  font-size:13px;
   }
   .chart-title div{	
	  line-height:38px;
	}
	/*****DAU TABLE****/
   td{
	   font-size:13px;
   }
	thead tr{
		height:29px;
	}	
	tbody tr{
		height: 43px;
	}
}